<template>
  <div>
    <h1>欢迎来到{{this.$store.state.appName}}</h1>
    <h3>{{appNameWithVersion}}</h3>
    <h3>{{usernameWithVersion}}</h3>
    <h3>{{siderCollapse}}</h3>
    <!-- <a-input :value="appName" @input="handleAppName" /> -->
    <a-input v-model="appName" />
    <br />
    <el-button type="warning" @click="handleClick">修改appName</el-button>
    <el-button type="warning" @click="userInfo" :style="{backgroundColor:bgColor}">请求api接口</el-button>
    <el-button type="warning" @click="registerModulea">动态注册模块</el-button>
    <p v-for="(item, index) in todoList" :key="index">{{item}}</p>
    <img :src="url" />
    <br />
    <el-button type="warning" @click="getNumber">获取组件的数值</el-button>
    <el-button type="warning" @click="changeVal">更新值</el-button>
    <!-- 封装第三方组件 -->
    <count-to ref="countTo" @on-animation-end="handleEnd" :end-val="endVal">
      <span slot="left">总金额：</span>
      <span slot="right">元</span>
    </count-to>
  </div>
</template>

<script>
import AInput from "../components/AInput";
import { mapMutations, mapActions, mapGetters, mapState } from "vuex";
import { getUserInfo } from "@/api/user";
import CountTo from "@/components/count-to";

export default {
  data() {
    return {
      url: "",
      bgColor: "",
      endVal: 0
    };
  },
  components: {
    AInput,
    CountTo
  },
  computed: {
    ...mapState({
      todoList: state => (state.user.todo ? state.user.todo.todoList : []),
      // appName: state => state.appName,
      siderCollapse: state => state.siderCollapse
    }),
    ...mapGetters(["appNameWithVersion", "usernameWithVersion"]),
    // appNameWithVersion() {
    //   return `${this.username}v2.0`;
    // }
    appName: {
      set(value) {
        this.UPDATE_APPNAME(value);
      },
      get() {
        return this.$store.state.appName;
      }
    }
  },
  methods: {
    ...mapMutations(["UPDATE_APPNAME", "SET_USERNAME"]),
    ...mapActions(["updateAppName", "updateUsername", "updateRootAppName"]),
    handleClick() {
      // this.$store.state.appName = "aaa";
      // this.$store.commit("UPDATE_APPNAME", "我是新的名字");
      // this.UPDATE_APPNAME("我是aaa");
      // this.SET_USERNAME("xiaoming");
      // this.updateAppName();
      this.updateUsername();
      this.updateRootAppName();
    },
    registerModulea() {
      this.$store.registerModule(["user", "todo"], {
        state: {
          todoList: ["学习vue", "学习Spring"]
        }
      });
    },
    handleAppName(val) {
      this.UPDATE_APPNAME(val);
    },
    async userInfo() {
      const { data: res } = await getUserInfo();
      this.url = res.img;
      this.bgColor = res.color;
      console.log(res);
    },
    getNumber() {
      this.$refs.countTo.getCount();
    },
    changeVal() {
      this.endVal += Math.random() * 100;
    },
    handleEnd(endVal) {
      console.log(`end -> ${endVal}`);
    }
  }
};
</script>

<style scoped lang="less">
</style>
